<template>
  <div class="model-parameter">
    <!-- 产汇流 -->
    <div class="confluence-box">
      <span class="confluence-title">产流参数</span>
      <div class="confluence-main">
        <!-- 模型参数 -->
        <div class="parameter-model">
          <span class="parameter-model-title">模型参数</span>
          <div class="parameter-model-text">
            <el-input
              v-model="state.unitParams.params"
              type="textarea"
              placeholder="模型参数"
              :disabled="state.Disabled"
            />
          </div>
        </div>
        <!-- 参数说明 -->
        <div class="parameter-explain">
          <span class="parameter-explain-title">参数说明</span>
          <div class="parameter-explain-text">
            <el-input
              v-model="state.unitParams.paramsDesc"
              type="textarea"
              placeholder="参数说明"
              :disabled="state.Disabled"
            />
          </div>
        </div>
      </div>
      <span class="confluence-title">河道演进参数</span>
      <div class="confluence-main w200">
        <!-- 河道演进汇流参数 -->
        <div class="parameter-model">
          <span class="parameter-model-title">河道演进汇流参数</span>
          <div class="parameter-model-text">
            <el-input
              v-model="state.riverParams.params"
              type="textarea"
              placeholder="模型参数"
              :disabled="state.Disabled"
            />
          </div>
        </div>
        <!-- 参数说明 -->
        <div class="parameter-explain">
          <span class="parameter-explain-title">参数说明</span>
          <div class="parameter-explain-text">
            <el-input
              v-model="state.riverParams.paramsDesc"
              type="textarea"
              placeholder="参数说明"
              :disabled="state.Disabled"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 河道演进 -->
    <div class="evolution-box">
      <div class="evolution-main">
        <!-- <div class="evolution-main-top">
                    <div class="river-params">
                      <span class="river-params-title">河道演进汇流参数</span>
                      <div class="river-params-text">
                        <el-input v-model="state.riverParams.params" type="textarea" placeholder="" />
                      </div>
                    </div>
                    <div class="params-explain">
                      <span class="params-explain-title">参数说明</span>
                      <div class="params-explain-text">
                        <el-input v-model="state.riverParams.paramsDesc" type="textarea" placeholder="" />
                      </div>
                    </div>
                  </div> -->

        <div class="evolution-main-bottom">
          <el-tabs v-model="activeParams" type="card" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="单元出口到预报断面汇流参数" name="first">
              <div class="unit-section">
                <!-- 计算单元 -->

                <div class="river-course">
                  <div class="computed-title">
                    <span class="computed-title-left" style="font-size: 12px">计算单元编码</span>
                    <span class="computed-title-right" style="font-size: 12px">名称</span>
                  </div>
                  <div class="river-course-main">
                    <div
                      :class="['computed-item', currentUnit === index ? 'active' : '']"
                      :key="index"
                      v-for="(item, index) in state.unitTableData"
                      @click="handleClickCd(item, index)"
                    >
                      <span class="computed-item-num">{{ item.clcd }}</span>
                      <el-tooltip
                        :content="item.clnm"
                        placement="top"
                        :disabled="item.clnm.length < 5"
                      >
                        <span class="computed-item-name">{{ item.clnm }}</span>
                      </el-tooltip>
                    </div>
                  </div>
                </div>
                <!-- 模型参数 -->
                <div class="bottom-model-params">
                  <span class="model-title">模型参数</span>
                  <div class="model-params">
                    <el-input
                      v-model="state.unitTableData[currentUnitEvol].params"
                      type="textarea"
                      placeholder=""
                      v-if="state.unitTableData.length > 0"
                      :disabled="state.Disabled"
                    />
                    <el-input type="textarea" v-model="state.ipt1" placeholder="" v-else />
                  </div>
                  <span class="model-title">模型说明</span>
                  <div class="model-params">
                    <el-input
                      v-model="state.unitTableData[currentUnitEvol].paramsDesc"
                      type="textarea"
                      placeholder=""
                      v-if="state.unitTableData.length > 0"
                      :disabled="state.Disabled"
                    />
                    <el-input type="textarea" v-model="state.ipt2" placeholder="" v-else />
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="入流站到预报断面汇流参数" name="second">
              <div class="unit-section">
                <!-- 演进河道 -->
                <div class="river-course">
                  <div class="river-course-title">演进河道</div>
                  <div class="river-course-main">
                    <span
                      :class="['river-item', currentRiver === index ? 'active' : '']"
                      :key="index"
                      v-for="(item, index) in state.upSectionArr"
                      @click="handleClickRiver(item, index)"
                      >{{ item.fnm }}-{{ item.blknm }}</span
                    >
                  </div>
                </div>
                <!-- 模型参数 -->
                <div class="bottom-model-params">
                  <span class="model-title">模型参数</span>
                  <div class="model-params">
                    <el-input
                      v-model="state.upSectionArr[currentInEvol].params"
                      type="textarea"
                      placeholder=""
                      v-if="state.upSectionArr.length > 0"
                      :disabled="state.Disabled"
                    />
                    <el-input type="textarea" v-model="state.ipt3" placeholder="" v-else />
                  </div>
                  <span class="model-title">模型说明</span>
                  <div class="model-params">
                    <el-input
                      v-model="state.upSectionArr[currentInEvol].paramsDesc"
                      type="textarea"
                      placeholder=""
                      v-if="state.upSectionArr.length > 0"
                      :disabled="state.Disabled"
                    />
                    <el-input type="textarea" v-model="state.ipt4" placeholder="" v-else />
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onUnmounted, reactive, ref, watch } from 'vue'
import pagiNation from '@/components/app-pagination/pagination.vue'
import {
  getXajForecastSectionInfo,
  getXajUnitPP,
  getXajRiverParams,
  getXajParamsDetail,
  getXajEvolTopology
} from '@/services/modules/model-config'
import emitter from '@/utils/bus'

const props = defineProps({
  paragmId: {
    type: Object,
    default: () => {}
  },
  unitTableData: {
    type: Array,
    default: () => []
  }
})

const activePlan = ref('first')
const activeParams = ref('first')
let textarea = reactive({
  text: ''
})
const currentCd = ref(0) //默认选中计算单元
const currentUnit = ref(0)
const currentRiver = ref(0)
const currentUnitEvol = ref(0)
const currentInEvol = ref(0)
const createArr = ref([])

const state = reactive({
  blkcd: '', //断面Id
  schemeName: '',
  upSectionArr: [], //入流信息
  rainTableData: [], //雨量计算单元
  unitTableData: [], //计算单元信息
  paramsOptions: [], //方案
  unitParams: {}, //产汇流参数
  riverParams: {}, //河道演进参数
  outParams: {},
  inParams: {},
  ipt1: '',
  ipt2: '',
  ipt3: '',
  ipt4: '',
  Disabled: true
})
// watch(
//   () => {
//     props.unitTableData
//   },
//   () => {
//     console.log(props.unitTableData, '组件')
//     state.unitTableData = props.unitTableData
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// )
defineExpose({
  state
})
emitter.on('openDisabled', (value) => {
  state.Disabled = value
})
emitter.on('paramsDetail', async (value) => {
  // await getXajParamsDetail({ scid: 77 }).then((res) => {
  await getXajParamsDetail({ scid: value }).then(async (res) => {
    if (res.code === 200) {
      // console.log(res.data)
      if (res.data) {
        state.unitParams = res.data.clParams
        state.riverParams = res.data.hlParams
        state.unitTableData = res.data.evolParams.unitEvol
        state.upSectionArr = res.data.evolParams.inEvol
      } else {
        if (state.unitTableData[currentUnitEvol.value]) {
          state.unitTableData[currentUnitEvol.value].params = ''
        }
        if (state.unitTableData[currentUnitEvol.value]) {
          state.unitTableData[currentUnitEvol.value].paramsDesc = ''
        }

        if (state.upSectionArr[currentInEvol.value]) {
          state.upSectionArr[currentInEvol.value].params = ''
        }
        if (state.upSectionArr[currentInEvol.value]) {
          state.upSectionArr[currentInEvol.value].paramsDesc = ''
        }
        await getXajEvolTopology(JSON.parse(JSON.stringify(props.paragmId))).then((res) => {
          if (res.code === 200) {
            state.upSectionArr = res.data
          }
        })
        state.unitParams = {}
        state.riverParams = {}
        state.unitTableData = props.unitTableData
      }
      // state.paramsOptions = res.data.paramsSchemes
      // state.schemeName = res.data.paramsSchemes[0].schemeName
      // state.blkcd = res.data.blkcd
    }
  })
  // await handleClickUnit(state.unitTableData[0], 0)
  // await handleClickCd(state.unitTableData[0], 0)
  // await handleClickRiver(state.upSectionArr[0], 0)
})
emitter.on('createConfig', async (value) => {
  console.log('createConfig')
  state.unitParams = {}
  state.riverParams = {}
  // state.unitTableData = []
  // state.upSectionArr = []
  state.unitTableData[currentUnitEvol.value].params = ''

  state.unitTableData[currentUnitEvol.value].paramsDesc = ''

  if (state.upSectionArr[currentInEvol.value]) {
    state.upSectionArr[currentInEvol.value].params = ''
  }
  if (state.upSectionArr[currentInEvol.value]) {
    state.upSectionArr[currentInEvol.value].paramsDesc = ''
  }
})
onUnmounted(() => {
  emitter.off('paramsDetail')
  emitter.off('createConfig')
})
//点击切换单元-入流站
const handleClick = (tab, event) => {}
//改变
function changeVal(value) {
  state.schemeName = value
}
//点击计算单元编码
function handleClickUnit(item, index) {
  currentCd.value = index
  getXajUnitPP({ clcd: item.clcd }).then((res) => {
    if (res.code === 200) {
      state.rainTableData = res.data
    }
  })
}
//
function handleClickCd(item, index) {
  currentUnit.value = index
  currentUnitEvol.value = index
  /* getXajRiverParams({ blkcd: item.blkcd, inCode: item.clcd }).then((res) => {
    if (res.code === 200) {
      state.outParams = res.data
    }
  }) */
}
function handleClickRiver(item, index) {
  currentRiver.value = index
  currentInEvol.value = index
  /* getXajRiverParams({ blkcd: state.blkcd, inCode: item.inBlkcd }).then((res) => {
    if (res.code === 200) {
      state.inParams = res.data
    }
  }) */
}
</script>
<style lang="less" scoped>
.model-parameter {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 5px;
  box-sizing: border-box;
  :deep(.el-textarea__inner) {
    resize: none;
  }
  .confluence-box {
    width: 320px;
    height: 100%;
    .confluence-title {
      display: inline-block;
      height: 20px;
      // font-weight: 600;
      color: #409eff;
    }
    .confluence-main {
      display: flex;
      justify-content: space-between;
      height: calc(50% - 35px);
      // height: calc(100% - 430px);
      padding: 0 10px;
      margin-top: 5px;
      box-sizing: border-box;
      &.w200 {
        // height: calc(100% - 400px);
      }
      .parameter-model {
        width: 48%;
        .parameter-model-title {
          display: block;
          height: 25px;
          line-height: 25px;
          color: #797979;
        }
        .parameter-model-text {
          width: 100%;
          height: calc(100% - 45px);
          margin-top: 5px;
        }
      }
      .parameter-explain {
        width: 48%;
        .parameter-explain-title {
          display: block;
          height: 25px;
          line-height: 25px;
          color: #797979;
        }
        .parameter-explain-text {
          width: 100%;
          height: calc(100% - 45px);
          margin-top: 5px;
        }
      }
    }
  }
  .evolution-box {
    width: calc(100% - 330px);
    height: 100%;
    .evolution-title {
      display: inline-block;
      height: 20px;
      font-weight: 600;
    }
    .evolution-main {
      height: calc(100% - 25px);
      padding: 0 10px;
      box-sizing: border-box;
      margin-top: 10px;
      .evolution-main-top {
        display: flex;
        justify-content: space-between;
        height: 100px;
        .river-params {
          width: 43%;
          .river-params-title {
            display: block;
            height: 20px;
          }
          .river-params-text {
            height: 82px;
          }
        }
        .params-explain {
          width: 55%;
          .params-explain-title {
            display: block;
            height: 20px;
          }
          .params-explain-text {
            height: 82px;
          }
        }
      }
      .evolution-main-bottom {
        height: calc(100% - 20px);
        .el-tabs__header {
          margin-bottom: 0px;
        }
        .unit-section {
          display: flex;
          justify-content: space-between;
          height: calc(100% - 15px);
          .river-course {
            width: 47%;
            height: 100%;
            .computed-title {
              display: flex;
              justify-content: space-between;
              height: 20px;
              line-height: 20px;
              padding: 0 20px;
              background-color: #f2f2f2;
            }
            .river-course-title {
              width: 100%;
              height: 20px;
              background-color: #f2f2f2;
              line-height: 20px;
              text-align: center;
            }
            .river-course-main {
              overflow-y: auto;
              height: calc(100% - 10px);
              background: #d7d4d427;
              .river-item {
                display: block;
                height: 30px;
                width: 100%;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
                &.active {
                  background: #f2f2f2;
                  color: #0054db;
                }
              }
              .computed-item {
                display: flex;
                justify-content: space-between;
                height: 25px;
                padding: 2px 10px;
                line-height: 25px;
                text-align: center;
                cursor: pointer;
                &.active {
                  background: #f2f2f2;
                  color: #0054db;
                }
                .computed-item-name {
                  width: 60px;
                  display: inline-block;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }
          }
          .bottom-model-params {
            width: 50%;
            height: 100%;

            .model-title {
              display: block;
              height: 20px;
              color: #797979;
            }
            .model-params {
              height: calc((100% - 28px) / 2);
            }
          }
        }
      }
    }
  }
}
</style>
